
<script>
    function exprot(){
        alertify.confirm("确定要导出数据吗?", function (i) {
            if (i) {
                location.href = "__URL__/exportBill";
            } else {
                alertify.error("取消操作！");
            }
        }, "mcit_default");
    }
</script>

<div>
<ol class="breadcrumb">
    <li> <i class="fa fa-anchor"></i>
        &nbsp;大数据统计
    </li>
    <li>站点账单</i></li>
      <li style="float:right">
            <a href="javascript:exprot();" class="localRgihtBt"><b>数据导出</b></a>
        </li>
    <li style="float: right"><a  href="javascript:history.go(-1);">返回</a></li>
</ol>
<div class="panel">
    <div class="panel-heading">
        
       <!-- &nbsp;&nbsp;<span>总计：&nbsp;{$countBill.total}次</span>
        &nbsp;&nbsp;<span>总电量：&nbsp;{$countBill.electricity}度</span>
        &nbsp;&nbsp;<span>总碳排放：&nbsp;{$countBill.carbon}千克</span>
        &nbsp;&nbsp;<span>总时长：&nbsp;{$countBill.charge_time}</span>
        &nbsp;&nbsp;<span>总服务费：&nbsp;{$countBill.service_fee}元</span>
        &nbsp;&nbsp;<span>总充电费：&nbsp;{$countBill.amount}元</span>-->
    </div>
    <div class="panel-body search-panel-body retract">
        <div class="col-xs-2 search-col " style="width:170px">
            <div class="input-group">
                <select id="elect"  class="form-control" style="background:#ccc;" >
                    <option  value="1">按年份选择</option>
                    <option  value="2">按月份选择</option>
                    <option  value="3">按时间段选择</option>
                    <option  value="4">按城市选择</option>
                    <option  value="5">按城市+年份选择</option>
                    <option  value="6">按城市+月份选择</option>
                    <option  value="7">按城市+时间段选择</option>
                    <option  value="8">按站点名称</option>
                </select>
            </div>
        </div>
        <!-- 按年 -->
        <form class="search-form year" action="__URL__/bill_site" method="get">
            <div class="col-xs-2 search-col ">
                <div class="input-group">
                    <input type="text" class="form-control  form_month2" placeholder="点击选择年" name="year" value="{$_GET['year']}"  data-date-format="yyyy" data-link-format="yyyy">
                </div>
            </div>
            <div class="col-xs-1 search-col">
                <button  type="submit" class="btn btn-warning">
                    <i class="fa fa-search"></i>
                    &nbsp;搜索
                </button>
            </div>
        </form>
        <!-- 按月 -->
        <form class="search-form month hide" action="__URL__/bill_site" method="get">
            <div class="col-xs-2 search-col">
                <div class="input-group">
                    <input type="text" class="form-control  form_month1" placeholder="点击选择月" name="month" value="{$_GET['month']}"  data-date-format="yyyy-mm" data-link-format="yyyy-mm">
                </div>
            </div>
            <div class="col-xs-1 search-col">
                <button  type="submit" class="btn btn-warning">
                    <i class="fa fa-search"></i>
                    &nbsp;搜索
                </button>
            </div>
        </form>
        <!-- 按时间段 -->
        <form class="search-form times hide" action="__URL__/bill_site" method="get">
            <div class="col-xs-4 search-col">
                <div class="input-group">
                    <input type="hidden" name="code" value="{$_GET['code']}"/>
                    <input type="text" class="form-control  form_month" placeholder="点击选择" name="start_time" value="{$_GET['start_time']}"  data-date-format="yyyy-mm-dd" data-link-format="yyyy-mm-dd">
                    <span class="input-group-addon">~~</span>
                    <input type="text" class="form-control  form_month" placeholder="点击选择" value="{$_GET['end_time']}" name="end_time"  data-date-format="yyyy-mm-dd" data-link-format="yyyy-mm-dd">
                </div>
            </div>
            <div class="col-xs-1 search-col">
                <button  type="submit" class="btn btn-warning">
                    <i class="fa fa-search"></i>
                    &nbsp;搜索
                </button>
            </div>
        </form>
        <!-- 按城市 -->
        <form class="search-form location_s hide" action="__URL__/bill_site" method="get">
            <div class="col-xs-5 search-col" style=" width:385px;">
                <div class="input-group">
                    <span class="input-group-addon" style="width:75px;">所在地</span>
                    <select id="location-f" name="location_f_1" class="form-control" style="width:100px;">
                        <option value="0">--</option>
                        <volist name="china" id="vo">
                            <option value="{$vo.code}">{$vo.name}</option>
                        </volist>
                    </select>

                    <select id="location-s" name="location_s_1" class="form-control" style="width:105px;border-left:0">
                        <option value="0">--</option>
                        <volist name="china" id="vo">
                            <volist name="vo['area']" id="vovo">
                                <option value="{$vovo.code}" class="{$vo.code}" >{$vovo.name}</option>
                            </volist>
                        </volist>
                    </select>

                    <select id="location-t" name="location_t_1" class="form-control required" style="width:105px;border-left:0">
                        <option value="0">--</option>
                        <volist name="china" id="vo">
                            <volist name="vo['area']" id="vovo">
                                <volist name="vovo['area']" id="vovovo">
                                    <option value="{$vovovo.code}" class="{$vovo.code}" >{$vovovo.name}</option>
                                </volist>
                            </volist>
                        </volist>
                    </select>
                </div>
            </div>
            <div class="col-xs-1 search-col" style="border-left:0">
                <button  type="submit" class="btn btn-warning">
                    <i class="fa fa-search"></i>
                    &nbsp;搜索
                </button>
            </div>
        </form>
        <!-- 按城市+年 -->
        <form class="search-form loc_year hide" action="__URL__/bill_site" method="get">
            <div class="col-xs-5 search-col" style=" width:385px;">
                <div class="input-group">
                    <span class="input-group-addon" style="width:75px;">所在地</span>
                    <select id="location-f1" name="location_f_1" class="form-control" style="width:100px;">
                        <option value="0">--</option>
                        <volist name="china" id="vo">
                            <option value="{$vo.code}">{$vo.name}</option>
                        </volist>
                    </select>

                    <select id="location-s1" name="location_s_1" class="form-control" style="width:105px;border-left:0">
                        <option value="0">--</option>
                        <volist name="china" id="vo">
                            <volist name="vo['area']" id="vovo">
                                <option value="{$vovo.code}" class="{$vo.code}" >{$vovo.name}</option>
                            </volist>
                        </volist>
                    </select>

                    <select id="location-t1" name="location_t_1" class="form-control required" style="width:105px;border-left:0">
                        <option value="0">--</option>
                        <volist name="china" id="vo">
                            <volist name="vo['area']" id="vovo">
                                <volist name="vovo['area']" id="vovovo">
                                    <option value="{$vovovo.code}" class="{$vovo.code}" >{$vovovo.name}</option>
                                </volist>
                            </volist>
                        </volist>
                    </select>
                </div>
            </div>
            <div class="col-xs-2 search-col ">
                <div class="input-group">
                    <span class="input-group-addon">+</span>
                    <input type="text" class="form-control  form_month2" placeholder="点击选择" name="year" value="{$_GET['year']}"  data-date-format="yyyy" data-link-format="yyyy">
                </div>
            </div>
            <div class="col-xs-1 search-col">
                <button  type="submit" class="btn btn-warning">
                    <i class="fa fa-search"></i>
                    &nbsp;搜索
                </button>
            </div>
        </form>
        <!-- 按城市+月 -->
        <form class="search-form loc_month hide" action="__URL__/bill_site" method="get">
            <div class="col-xs-5 search-col" style=" width:385px;">
                <div class="input-group">
                    <span class="input-group-addon" style="width:75px;">所在地</span>
                    <select id="location-f2" name="location_f_1" class="form-control" style="width:100px;">
                        <option value="0">--</option>
                        <volist name="china" id="vo">
                            <option value="{$vo.code}">{$vo.name}</option>
                        </volist>
                    </select>

                    <select id="location-s2" name="location_s_1" class="form-control" style="width:105px;border-left:0">
                        <option value="0">--</option>
                        <volist name="china" id="vo">
                            <volist name="vo['area']" id="vovo">
                                <option value="{$vovo.code}" class="{$vo.code}" >{$vovo.name}</option>
                            </volist>
                        </volist>
                    </select>

                    <select id="location-t2" name="location_t_1" class="form-control required" style="width:105px;border-left:0">
                        <option value="0">--</option>
                        <volist name="china" id="vo">
                            <volist name="vo['area']" id="vovo">
                                <volist name="vovo['area']" id="vovovo">
                                    <option value="{$vovovo.code}" class="{$vovo.code}" >{$vovovo.name}</option>
                                </volist>
                            </volist>
                        </volist>
                    </select>
                </div>
            </div>
            <div class="col-xs-2 search-col">
                <div class="input-group">
                    <span class="input-group-addon">+</span>
                    <input type="text" class="form-control  form_month1" placeholder="点击选择" name="month" value="{$_GET['month']}"  data-date-format="yyyy-mm" data-link-format="yyyy-mm">
                </div>
            </div>
            <div class="col-xs-1 search-col">
                <button  type="submit" class="btn btn-warning">
                    <i class="fa fa-search"></i>
                    &nbsp;搜索
                </button>
            </div>
        </form>
        <!-- 按城市+时间段 -->
        <form class="search-form loc_times hide" action="__URL__/bill_site" method="get">
            <div class="col-xs-5 search-col" style=" width:385px;">
                <div class="input-group">
                    <span class="input-group-addon" style="width:75px;">所在地</span>
                    <select id="location-f3" name="location_f_1" class="form-control" style="width:100px;">
                        <option value="0">--</option>
                        <volist name="china" id="vo">
                            <option value="{$vo.code}">{$vo.name}</option>
                        </volist>
                    </select>

                    <select id="location-s3" name="location_s_1" class="form-control" style="width:105px;border-left:0">
                        <option value="0">--</option>
                        <volist name="china" id="vo">
                            <volist name="vo['area']" id="vovo">
                                <option value="{$vovo.code}" class="{$vo.code}" >{$vovo.name}</option>
                            </volist>
                        </volist>
                    </select>

                    <select id="location-t3" name="location_t_1" class="form-control required" style="width:105px;border-left:0">
                        <option value="0">--</option>
                        <volist name="china" id="vo">
                            <volist name="vo['area']" id="vovo">
                                <volist name="vovo['area']" id="vovovo">
                                    <option value="{$vovovo.code}" class="{$vovo.code}" >{$vovovo.name}</option>
                                </volist>
                            </volist>
                        </volist>
                    </select>
                </div>
            </div>
            <div class="col-xs-4 search-col">
                <div class="input-group">
                    <span class="input-group-addon">起止时间</span>
                    <input type="hidden" name="code" value="{$_GET['code']}"/>
                    <input type="text" class="form-control  form_month" placeholder="点击选择" name="start_time" value="{$_GET['start_time']}"  data-date-format="yyyy-mm-dd" data-link-format="yyyy-mm-dd">
                    <span class="input-group-addon">~~</span>
                    <input type="text" class="form-control  form_month" placeholder="点击选择" value="{$_GET['end_time']}" name="end_time"  data-date-format="yyyy-mm-dd" data-link-format="yyyy-mm-dd">
                </div>
            </div>
            <div class="col-xs-1 search-col">
                <button  type="submit" class="btn btn-warning">
                    <i class="fa fa-search"></i>
                    &nbsp;搜索
                </button>
            </div>
        </form>

        <form class="search-form loc_site hide" action="__URL__/bill_site" method="get" >
            <div class="col-xs-2 search-col">
                <div class="input-group">
                    <input type="text" name="site_name" class="form-control" value="{$_GET['site_name']}"  placeholder="站点名称"></div>
            </div>
            <div class="col-xs-1 search-col">
                <button  type="submit" class="btn btn-warning">
                    <i class="fa fa-search"></i>
                    &nbsp;搜索
                </button>
            </div>
        </form>
    </div>
</div>

        <table  class="table table-bordered table-mcit" >
            <thead>
                <tr>
                    <th >
                        <empty name="huizong">
                            <button class='btn btn-block btn-mcit' type='button' style="text-align:center" > <strong><i class="fa fa-meh-o"></i>
                                &nbsp;&nbsp;当前条件下没有汇总数据</strong>
                            </button>
                        <else />
                            <button class='btn btn-block btn-mcit' type='button' >
                                <!-- volist name="countBills" id="datas"> -->
                                    &nbsp;&nbsp;<span>总计：&nbsp;{$huizong.total}次</span>
                                    &nbsp;&nbsp;<span>总电量：&nbsp;{$huizong.electricity}度</span>
                                    &nbsp;&nbsp;<span>总碳排放：&nbsp;{$huizong.carbon}千克</span>
                                    &nbsp;&nbsp;<span>总充电时长：&nbsp;{$huizong.charge_time_str}</span>
                                    &nbsp;&nbsp;<span>总充电费：&nbsp;{$huizong.amount}元</span>
                                    &nbsp;&nbsp;<span>总服务费：&nbsp;{$huizong.service_fee}元</span>
                                    &nbsp;&nbsp;<span>总充电费：&nbsp;{$huizong.amount}元</span>
                                    
                                <!-- </volist> -->
                            </button>
                        </empty>
                    </th>
                </tr>
            </thead>
        </table>


        <table  class="table table-bordered table-striped table-mcit" >
            <thead>
                <tr>
                    <th >
                        <button class='btn btn-block btn-mcit' type='button' >ID</button>
                    </th>
                    <th>
                        <button class='btn btn-block btn-mcit' type='button' >名称</button>
                    </th>
                    <th>
                        <button class='btn btn-block btn-mcit' type='button' >所在地</button>
                    </th>
                    <th>
                        <button class='btn btn-block btn-mcit' type='button' >电桩数</button>
                    </th>
                    <th>
                        <button class='btn btn-block btn-mcit' type='button'>账单数</button>
                    </th>
                    <th>
                        <button class='btn btn-block btn-mcit' type='button'>用电电量</button>
                    </th>
                    <th>
                        <button class='btn btn-block btn-mcit' type='button'>总时长</button>
                    </th>
                    <th>
                        <button class='btn btn-block btn-mcit' type='button'>预约时长</button>
                    </th>
                    <th>
                        <button class='btn btn-block btn-mcit' type='button'>充电时长</button>
                    </th>
                    <th>
                        <button class='btn btn-block btn-mcit' type='button'>总金额</button>
                    </th>
                     <th>
                        <button class='btn btn-block btn-mcit' type='button'>预约费</button>
                    </th>                   
                    <th>
                        <button class='btn btn-block btn-mcit' type='button'>充电费</button>
                    </th>                    
                    
                    <th>
                        <button class='btn btn-block btn-mcit' type='button'>服务费</button>
                    </th>
                    
                    
                    <th>
                        <button class='btn btn-block btn-mcit' type='button' >操作</button>
                    </th>
                </tr>
            </thead>
            <tbody id="DataTableContent">
            <empty name="plant">
                <td colspan="99" style="text-align:center" class="danger"> <strong><i class="fa fa-meh-o"></i>
                    &nbsp;&nbsp;当前条件下没有数据</strong>
                </td>
                <else />
                <volist name="plant" id="data">
                    <tr class="lists" align="center">
                        <td>{$data.site_id}</td>
                        <td><span title="{$data.site_name}" style="cursor:pointer">{$data.site_name}</span></td>
                        <td><span title="{$data.location}" style="cursor:pointer">{$data.location}</span></td>
                        
                        <td><if condition="$data.char_count neq null">{$data.char_count}<else />0</if></td>
                        <td><if condition="$data.total neq null">{$data.total}<else />0</if></td>
                        <td><if condition="$data.electricity neq null">{$data.electricity}<else />0</if></td>
                        <td><if condition="$data.total_time_str neq null">{$data.total_time_str}<else />0年0天0小时0分0秒</if></td>
                        <td><if condition="$data.bespeak_time_str neq null">{$data.bespeak_time_str}<else />0年0天0小时0分0秒</if></td>
                        <td><if condition="$data.charge_time_str neq null">{$data.charge_time_str}<else />0年0天0小时0分0秒</if></td>
                        
                        <td><if condition="$data.total_amount neq null">{$data.total_amount}<else />0.00</if></td>
                        <td><if condition="$data.bespeak_fee neq null">{$data.bespeak_fee}<else />0.00</if></td>
                        <td><if condition="$data.amount neq null">{$data.amount}<else />0.00</if></td>
                        <td><if condition="$data.service_fee neq null">{$data.service_fee}<else />0.00</if></td>
                        
                        
                        
                        
                        <td>
                            <a class="btn btn-success btn-sm" href="__URL__/site_charge/id/{$data.site_id}">
                                <i class="fa fa-eye"></i>
                                &nbsp;详情
                            </a>
                            <a class="btn btn-success btn-sm" href="__URL__/site_evcharge/ev_plant_id/{$data.site_id}">
                                <i class="fa fa-bar-chart-o"></i>
                                &nbsp;电桩统计
                            </a>
                        </td>
                    </tr>
                </volist>
            </empty>
            <tr>
                <td colspan="99" style="text-align:center">
                    <ul class="pagination">{$pageView}</ul>
                </td>
            </tr>
            </tbody>
        </table>
        <input type="hidden" name="fsign" id="fsign" value="normal">
</div>
</div>
<import file="js.jquery#chained" />
<import type='css' file="css.datetimepicker" />
<import file="js.bootstrap-datetimepicker#min" />
<import file="js.bootstrap-datetimepicker#zh-CN" />
<import file="js.maskedinput" />
<script type="text/javascript">
    $(document).ready(function () {
        //时间段
        $(".form_month").datetimepicker({
            language: 'zh-CN',
            autoclose: true,
            startView:'month',
            minView: 'month',
            todayBtn: true,
            viewSelect: 'year',
            pickerPosition: "bottom-right"
        });
        //按月
        $(".form_month1").datetimepicker({
            language: 'zh-CN',
            autoclose: true,
            startView:'year',
            minView: 'year',
            todayBtn: false,
            viewSelect: 'year',
            pickerPosition: "bottom-right"
        });
        //按年
        $(".form_month2").datetimepicker({
            language: 'zh-CN',
            autoclose: true,
            startView:'decade',
            minView: 'decade',
            todayBtn: false,
            viewSelect: 'decade',
            pickerPosition: "bottom-right"
        });
        //搜索表单切换
        $("#elect").bind("change",function(){
            var tab_id = $(this).val();
            if(tab_id == 1){
                $(".year").removeClass("hide");
                $(".month").addClass("hide");
                $(".times").addClass("hide");
                $(".location_s").addClass("hide");
                $(".loc_year").addClass("hide");
                $(".loc_month").addClass("hide");
                $(".loc_times").addClass("hide");
                $(".loc_site").addClass("hide");
            }else if(tab_id == 2){
                $(".year").addClass("hide");
                $(".month").removeClass("hide");
                $(".times").addClass("hide");
                $(".location_s").addClass("hide");
                $(".loc_year").addClass("hide");
                $(".loc_month").addClass("hide");
                $(".loc_times").addClass("hide");
                $(".loc_site").addClass("hide");
            }else if(tab_id == 3){
                $(".year").addClass("hide");
                $(".month").addClass("hide");
                $(".times").removeClass("hide");
                $(".location_s").addClass("hide");
                $(".loc_year").addClass("hide");
                $(".loc_month").addClass("hide");
                $(".loc_times").addClass("hide");
                $(".loc_site").addClass("hide");
            }else if(tab_id == 4){
                $(".year").addClass("hide");
                $(".month").addClass("hide");
                $(".times").addClass("hide");
                $(".location_s").removeClass("hide");
                $(".loc_year").addClass("hide");
                $(".loc_month").addClass("hide");
                $(".loc_times").addClass("hide");
                $(".loc_site").addClass("hide");
            }else if(tab_id == 5){
                $(".year").addClass("hide");
                $(".month").addClass("hide");
                $(".times").addClass("hide");
                $(".location_s").addClass("hide");
                $(".loc_year").removeClass("hide");
                $(".loc_month").addClass("hide");
                $(".loc_times").addClass("hide");
                $(".loc_site").addClass("hide");
            }else if(tab_id == 6){
                $(".year").addClass("hide");
                $(".month").addClass("hide");
                $(".times").addClass("hide");
                $(".location_s").addClass("hide");
                $(".loc_year").addClass("hide");
                $(".loc_month").removeClass("hide");
                $(".loc_times").addClass("hide");
                $(".loc_site").addClass("hide");
            }else if(tab_id == 7){
                $(".year").addClass("hide");
                $(".month").addClass("hide");
                $(".times").addClass("hide");
                $(".location_s").addClass("hide");
                $(".loc_year").addClass("hide");
                $(".loc_month").addClass("hide");
                $(".loc_times").removeClass("hide");
                $(".loc_site").addClass("hide");
            }else if(tab_id == 8){
                $(".year").addClass("hide");
                $(".month").addClass("hide");
                $(".times").addClass("hide");
                $(".location_s").addClass("hide");
                $(".loc_year").addClass("hide");
                $(".loc_month").addClass("hide");
                $(".loc_times").addClass("hide");
                $(".loc_site").removeClass("hide");
            }
        });
    });
</script>
<script type="text/javascript">
    function show_first_page(){
        $("#fsign").val("abnormal");
        return true;
    }
    $(document).ready(function () {
        $("#location-s").chained("#location-f");
        $("#location-t").chained("#location-s");

        $("#location-s1").chained("#location-f1");
        $("#location-t1").chained("#location-s1");

        $("#location-s2").chained("#location-f2");
        $("#location-t2").chained("#location-s2");

        $("#location-s3").chained("#location-f3");
        $("#location-t3").chained("#location-s3");

    })
</script>